﻿@page "/tests/charts/zoom"
<Row>
    <Column>
        <Button Color="Color.Primary" Clicked="@OnResetZoomLevelClicked">
            Reset Zoom
        </Button>
        <Button Color="Color.Primary" Clicked="@OnSetZoomLevelClicked">
            Zoom x2
        </Button>
    </Column>
</Row>

<Row>
    <Column ColumnSize="ColumnSize.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Line</CardTitle>
            </CardHeader>
            <CardBody>
                <LineChart @ref="lineChart" TItem="double" Options="@lineChartOptions">
                    <ChartZoom @ref="@lineChartZoom" TItem="double" Options="@lineChartZoomOptions" Zoomed="@OnZoomed" />
                </LineChart>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Bar</CardTitle>
            </CardHeader>
            <CardBody>
                <BarChart @ref="barChart" TItem="double" Options="@barChartOptions">
                    <ChartDataLabels TItem="double" Datasets="@barDataLabelsDatasets" Options="@barDataLabelsOptions" />
                    <ChartZoom @ref="@barChartZoom" TItem="double" Options="@barChartZoomOptions" />
                </BarChart>
            </CardBody>
        </Card>
    </Column>
</Row>